<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"--%>
<%--"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/layui/css/layui.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="/js/jquery.js"></script>
    <script src="/layui/layui.js" type="text/javascript"></script>
    <script src="/js/custom/index.js"></script>

    <style type="text/css">

        html, body {
            width: 100%;
            height: 100%;
        }

        .ncovInfo_li {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .box-top {
            display: flex;
            width: 30%;
            height: 100%;
            /*background: antiquewhite;*/
            justify-content: space-around;
        }

        .box1 {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .box-under {
            display: flex;
            width: calc(70% - 10px);
            height: 100%;
            /*background: blueviolet;*/
            justify-content: space-around;
            align-items: center;
            padding: 10px 0;
        }

        .box2 {
            box-shadow: 3px 3px 10px #909090;
        }

    </style>
</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
    </ul>
</div>
<div class="mainindex" style="height: calc(100% - 80px);">
    <div class="welinfo">
        <span><img src="/images/sun.png" alt="天气"/></span>
        <b><span id = "userRealName"> 用户${sessionScope.loginUser.userName}</span>早上好，欢迎使用校园宿舍管理系统 </b>
        <a href="tempRecord">(提交今日体温)</a>
    </div>

    <div class="xline"></div>

    <div style="padding-top: 10px; height: 40px; display: flex;">
        <div style="display: flex; width: 30%; justify-content: space-around; align-items: flex-end;">
            <span style="font-size:20px; font-weight:bold; color: dimgrey">疫情数据</span>
        </div>
        <div style="display: flex; width: 70%; justify-content: space-around; align-items: flex-end;">
            <span style="font-size:20px; font-weight:bold; color: dimgrey">最新公告</span>
        </div>
    </div>

    <div style="height: calc(100% - 82px);display: flex;">
        <div class="box-top">
            <div class="box1">
                <div class="ncovInfo_li">
                    <div><b id="currentConfirmedIncrStr">较昨日</b><em id="currentConfirmedIncr"
                                                                    style="color: rgb(247, 76, 49);">+4</em></div>
                    <strong id="currentConfirmedCount" style="font-size: 30px; color: rgb(247, 76, 49);">494</strong>
                    <span style="font-size: 15px; font-weight: bold">现存确诊</span>
                </div>
                <div class="ncovInfo_li">
                    <div><b id="suspectedIncrStr">较昨日</b><em id="suspectedIncr" style="color: rgb(247, 130, 7);">+8</em>
                    </div>
                    <strong id="suspectedCount" style="font-size: 30px; color: rgb(247, 130, 7);">5,443</strong>
                    <span style="font-size: 15px; font-weight: bold">境外输入</span>
                </div>
                <div class="ncovInfo_li">
                    <div><b id="seriousIncrStr">较昨日</b><em id="seriousIncr" style="color: rgb(162, 90, 78);">-2</em>
                    </div>
                    <strong id="seriousCount" style="font-size: 30px; color: rgb(162, 90, 78);">299</strong>
                    <span style="font-size: 15px; font-weight: bold">现存无症状</span>
                </div>
            </div>
            <div class="box1">
                <div class="ncovInfo_li">
                    <div><b id="confirmedIncrStr">较昨日</b><em id="confirmedIncr"
                                                             style="color: rgb(174, 33, 44);">+26</em></div>
                    <strong id="confirmedCount" style="font-size: 30px; color: rgb(174, 33, 44);">103,153</strong>
                    <span style="font-size: 15px; font-weight: bold">累计确诊</span>
                </div>
                <div class="ncovInfo_li">
                    <div><b id="deadIncrStr">较昨日无变化</b><em id="deadIncr" style="color: rgb(174, 33, 44);">+26</em></div>
                    <strong id="deadCount" style="font-size: 30px; color: rgb(93, 112, 146);">4,854</strong>
                    <span style="font-size: 15px; font-weight: bold">累计死亡</span></div>
                <div class="ncovInfo_li">
                    <div><b id="curedIncrStr">较昨日</b><em id="curedIncr" style=" color: rgb(40, 183, 163);">+22</em>
                    </div>
                    <strong id="curedCount" style="font-size: 30px; color: rgb(40, 183, 163);">97,805</strong>
                    <span style="font-size: 15px; font-weight: bold">累计治愈</span></div>
            </div>
        </div>
        <div class="box-under">
           <div style="text-align: center;">
               <a href="#" id="href_title"><h1>今日公告</h1></a>
               <br/> <br/> <br/>
               <a href="#" id="href_img">
                   <img id="image" src="/upload/121382-106.jpg" alt="" width="80%"/>
               </a>
           </div>
        </div>
    </div>
</div>
        <script type="text/javascript">
            //广告数据
            var datas;
            var index=0;

            $(function () {
                $.getJSON("/BulletinController.do?action=show",function (result) {
                    //alert(JSON.stringify(result));
                    if(result.code==200){
                        datas=result.data;
                    }
                    //公告数据加载完毕
                    window.setInterval("loopImage()",3000);
                });
            });

            function loopImage() {
                var gonggao= datas[index];
                var bulletinId=gonggao.bulletinId;
                var bulletinTitle=gonggao.bulletinTitle;
                var bulletinImg=gonggao.bulletinImg;

                $("#title").text(bulletinTitle);
                $("#image").prop("src",bulletinImg);

                $("#href_img").prop("href","/BulletinController.do?action=findById&bulletinId="+bulletinId);
                $("#href_title").prop("href","/BulletinController.do?action=findById&bulletinId="+bulletinId);

                index++;
                if(index==datas.length){
                    index=0;
                }
            }
        </script>

</body>
</html>
